import { RouteComponentProps, Route, Switch, Redirect } from "react-router-dom";
import React, { Component } from 'react';
import { Layout, Menu } from "antd";
import { personalRoutes } from "../../routes/personalRoutes";
import './Personal.less'
import { connect, ConnectedProps } from "react-redux";
import { RootState } from "../../reducers";
import UserType from "../../types/UserType";
import { NotFound } from "../../components";

const { SubMenu } = Menu;
const { Sider } = Layout;

interface IProps extends RouteComponentProps<{ view: string }>, ConnectedProps<typeof connector> { }
interface IState {
    viewRouteKey: string                        //当前选定的页面，根据选定条件渲染高亮菜单栏
}

class Personal extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            viewRouteKey: this.props.match.params.view
        }
    }

    //初始url——'/personal'
    originURL = '/personal'

    //Sider点击后回调函数
    menuOnClick: ((param: any) => void) = ({ key }) => {
        this.props.history.push(`${this.originURL}/${key}`)
    }

    render() {
        return (
            (this.props.isLogin && this.props.userType === UserType.DEVICEADMIN)
                ?
                (<div className="frameCardWrapper">

                    <Layout style={{ minHeight: '100%' }}>
                        <Sider width={200} className="site-layout-background">
                            <Menu
                                onClick={this.menuOnClick}
                                mode="inline"
                                defaultSelectedKeys={[this.state.viewRouteKey]}
                                defaultOpenKeys={['manufacturerManage', 'deviceManage', 'deviceKnowledgeManage', 'reviewArticleManage']}
                                style={{ minHeight: '100%', borderRight: 0 }}
                            >
                                <Menu.Item key="userManage">用户管理</Menu.Item>

                                <SubMenu key="manufacturerManage" title="厂商管理">
                                    <Menu.Item key="manufacturerInfo">厂商信息</Menu.Item>
                                    <Menu.Item key="addManufacturer">增加厂商</Menu.Item>
                                    <Menu.Item key="modifyManufacturer">编辑厂商</Menu.Item>
                                    <Menu.Item key="userJoinManufacturer">用户加入厂商</Menu.Item>
                                    <Menu.Item key="userLeaveManufacturer">用户离开厂商</Menu.Item>
                                </SubMenu>

                                <SubMenu key="deviceManage" title="设备管理">
                                    <Menu.Item key="deviceInfo">设备信息</Menu.Item>
                                    <Menu.Item key="addDevice">增加设备</Menu.Item>
                                    <Menu.Item key="modifyDevice">编辑设备</Menu.Item>
                                </SubMenu>

                                <SubMenu key="deviceKnowledgeManage" title="设备知识">
                                    <Menu.Item key="deviceKnowledgeInfo">设备知识信息</Menu.Item>
                                    <Menu.Item key="addDeviceKnowledge">新增设备知识</Menu.Item>
                                    <Menu.Item key="modifyDeviceKnowledge">编辑设备知识</Menu.Item>
                                </SubMenu>

                                <SubMenu key="reviewArticleManage" title="测评文章">
                                    <Menu.Item key="reviewArticleInfo">测评文章信息</Menu.Item>
                                    <Menu.Item key="addReviewArticle">新增测评文章</Menu.Item>
                                    <Menu.Item key="modifyReviewArticle">编辑测评文章</Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout>
                            <div className="personal">
                                {/* 根据路由渲染 */}
                                <Switch>
                                    {personalRoutes.map(item => (
                                        <Route path={`${this.originURL}/${item.path}`} key={item.path} component={item.component} exact={!!item.exact} />
                                    ))}
                                    <Redirect to={`${this.originURL}/userManage`} />{/*若无匹配重定向 */}
                                </Switch>
                            </div>
                        </Layout>
                    </Layout>

                </div>)
                :
                <Route component={NotFound} />
        )
    }

}
//connect加入props
const mapStateToProps = (state: RootState) => {
    return {
        userID: state.loginReducers.userID,
        userType: state.loginReducers.userType,
        isLogin: state.loginReducers.isLogin
    }
}
const connector = connect(mapStateToProps);

export default connector(Personal);